<template>
  <view class="dy-scroll-container">
    <dy-navbar title="底部按钮栏" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="底部双按钮" />
        <template slot="body">
          <dy-bottom-bar border-top="none" custom-class="dy-align-center">
            <dy-button type="secondary" style="width: 50%;" width="100%" class="dy-mg-right-24">
              忽略
            </dy-button>
            <dy-button type="primary" style="width: 50%;" width="100%">确认</dy-button>
          </dy-bottom-bar>
        </template>
      </dy-card>

      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="底部三按钮" />
        <template slot="body">
          <dy-bottom-bar border-top="none" custom-class="dy-align-center">
            <dy-button type="secondary" style="width: 50%;" width="100%" class="dy-mg-right-24">
              忽略
            </dy-button>
            <dy-button type="warn" style="width: 50%;" width="100%" class="dy-mg-right-24">
              销毁
            </dy-button>
            <dy-button type="primary" style="width: 50%;" width="100%">确认</dy-button>
          </dy-bottom-bar>
        </template>
      </dy-card>

      <dy-card v-for="item in 99" :key="item" :title="item + '. 标题'">{{ item }}</dy-card>
    </scroll-view>
    <dy-bottom-bar>
      <dy-button type="primary" width="100%">确认</dy-button>
    </dy-bottom-bar>
  </view>
</template>

<script>
export default {
  name: 'BottomBar'
}
</script>

<style lang="scss" scoped></style>
